<template>
	<div class="zBox">
		<div class="top">
			<el-form class="xHeight" :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
				<el-form-item label="姓名" prop="name"><el-input v-model="queryParams.name" placeholder="请输入" maxlength="30" /></el-form-item>
				<el-form-item label="时间" prop="time">
					<el-date-picker
						v-model="dateRange"
						type="daterange"
						range-separator="-"
						value-format="YYYY-MM-DD"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
					></el-date-picker>
				</el-form-item>
				<el-form-item>
					<div class="cz" @click="reset">重置</div>
					<div class="cx" @click="search">查询</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="bottom">
			<el-table class="qjTable " v-loading="loading" :data="typeList" @selection-change="handleSelectionChange" stripe>
				<el-table-column label="姓名" align="center" prop="createBy" />
				<el-table-column label="类型" align="center" prop="type_mc" />
				<el-table-column label="开始时间" align="center" prop="startTime" />
				<el-table-column label="结束时间" align="center" prop="endTime" />
				<el-table-column label="请假时长" align="center" prop="absenceDuration" />
				<el-table-column label="提交时间" align="center" prop="createTime" />
				<el-table-column label="状态" align="center">
					<template #default="scope">
						<div class="ztbox">
							<div class="dian" :style="{ background: qjzt[scope.row.state].color }"></div>
							<span :style="{ color: qjzt[scope.row.state].color }">{{ qjzt[scope.row.state].lable }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template #default="scope">
						<div class="czan">
							<div class="czBut xj" v-if="scope.row.state == 1 || (scope.row.state == 4&& scope.row.approveId ==userId)" @click="approval(scope.row.absenceId)">审核</div>
							<div class="czBut bjckdj"  @click="detail(scope.row.absenceId)">查看</div>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
		</div>
		<el-dialog class="qjdialog" v-model="spDialogVisible" :close-on-click-modal="false" title="审核" top="2vh" width="45%">
			<div class="shbj">请假申请</div>
			<table class="mailTable">
				<tr>
					<td class="column ">姓名</td>
					<td class="nrkd">{{ qjDetail.createBy }}</td>
					<td class="column">提交时间</td>
					<td class="nrkd">{{ qjDetail.createTime }}</td>
				</tr>
				<tr>
					<td class="column ">开始时间</td>
					<td class="nrkd">{{ qjDetail.startTime }}</td>
					<td class="column ">结束时间</td>
					<td class="nrkd">{{ qjDetail.endTime }}</td>
				</tr>
				<tr>
					<td class="column ">请假类型</td>
					<td class="nrkd">{{ qjDetail.type }}</td>
					<td class="column ">抄送人</td>
					<td class="nrkd">{{ qjDetail.copyNames }}</td>
				</tr>
				<tr>
					<td class="column ">请假时长</td>
					<td class="nrkd">{{ qjDetail.absenceDuration }}小时</td>
					<td class="column">调休时长</td>
					<td class="nrkd">{{ qjDetail.sabbaticalHour }}小时</td>
				</tr>
				<tr>
					<td class="column">请假事由</td>
					<td class="nrkd lineHeight" colspan="3">{{ qjDetail.reason || '暂无' }}</td>
				</tr>
				<tr>
					<td class="column">审核进度</td>
					<td class="nrkd lineHeight" colspan="3">
						<p class="jdbox" style="display: flex;" v-for="(item, index) in auditList">
							<span class="spzt"  :class="{ytg:item.status==2,btg:item.status==3,dsh:item.status==1}"></span>
							<span class="xuLine" style="position: absolute;width: 2px;height: 20px;border: 1px dashed #ccc;"></span>
							<span>
								{{
									item.approveUser +
										'\xa0\xa0\xa0' +
										(item.status == 1 ? '待审核' : item.approveTime) +
										'\xa0\xa0\xa0' +
										(item.approveReason ? item.approveReason : '')
								}}
							</span>
						</p>
					</td>
				</tr>
				
				
			</table>

			<div v-if="qjDetail.state == 4" class="shbj sptop">销假申请</div>
			<table v-if="qjDetail.state == 4" class="mailTable">
				<!-- 销假信息 -->
				<tr>
					<td class="column ">销假时间</td>
					<td class="nrkd">{{ xjDetail.reportBackTime }}</td>
					<td class="column ">销假时长</td>
					<td class="nrkd">{{ xjDetail.reportBackDuration }}小时</td>
				</tr>
				<tr>
					<td class="column">备注</td>
					<td class="nrkd lineHeight" colspan="3">{{ xjDetail.reportBackReason || '暂无' }}</td>
				</tr>
			</table>

			<div class="shbj sptop">{{ qjDetail.state == 1 ? '请假审核' : '销假审核' }}</div>
			<el-form style="display: flex;" ref="ruleFormRef" :model="spForm" :rules="spRules" label-width="83px">
				<div :class="{ left: needNext == 2, dwidth: needNext == 1 }">
					<el-form-item v-if="qjDetail.state == 1" class="xW" label="需上级审核:" style="width: 100%">
						<el-radio v-model="needNext" :label="2" @change="isSpBox">是</el-radio>
						<el-radio v-model="needNext" :label="1" @change="isSpBox">否</el-radio>
					</el-form-item>
					<el-form-item class="flxz" label="审核意见" prop="approveReason">
						<el-input :style="{ width: needNext == 2 ? '83%' : '100%' }" type="textarea" v-model="spForm.approveReason" rows="3"></el-input>
					</el-form-item>
				</div>
				<div v-if="needNext == 2" class="right">
					<el-form-item class="spr" label="审核人" prop="nextUserId">
						<el-select style="width: 100%;" v-model="spForm.nextUserId" @change="appoversChange" filterable allow-create default-first-option placeholder="请选择人员">
							<el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value">
								<div class="userOption">
									<img :src="item.headImg" alt="" />
									<span>{{ item.label }}</span>
								</div>
							</el-option>
						</el-select>
						<div v-if="sprData.label" class="spBox sxm">
							<img :src="sprData.headImg" />
							<p>{{ sprData.label }}</p>
						</div>
					</el-form-item>
				</div>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-form-item class="dw">
						<div class="cz" @click="check(3)">不通过</div>
						<div class="cx" @click="check(2)">通过</div>
					</el-form-item>
				</span>
			</template>
		</el-dialog>

		<el-dialog class="qjdialog" v-model="detailDialogVisible" title="请假申请" top="8vh" width="45%">
			<div class="shbj">请假信息</div>
			<table class="mailTable">
				<tr>
					<td class="column ">姓名</td>
					<td class="nrkd">{{ qjDetail.createBy }}</td>
					<td class="column">提交时间</td>
					<td class="nrkd">{{ qjDetail.createTime }}</td>
				</tr>
				<tr>
					<td class="column ">开始时间</td>
					<td class="nrkd">{{ qjDetail.startTime }}</td>
					<td class="column ">结束时间</td>
					<td class="nrkd">{{ qjDetail.endTime }}</td>
				</tr>
				<tr>
					<td class="column ">请假类型</td>
					<td class="nrkd">{{ qjDetail.type }}</td>

					<td class="column ">抄送人</td>
					<td class="nrkd">{{ qjDetail.copyNames }}</td>
				</tr>
				<tr>
					<td class="column ">请假时长</td>
					<td class="nrkd">{{ qjDetail.absenceDuration }}小时</td>
					<td class="column">调休时长</td>
					<td class="nrkd">{{ qjDetail.sabbaticalHour }}小时</td>
				</tr>
				<tr>
					<td class="column">请假事由</td>
					<td class="nrkd lineHeight" colspan="3">{{ qjDetail.reason || '暂无' }}</td>
				</tr>
				<tr>
					<td class="column">审核进度</td>
					<td class="nrkd lineHeight" colspan="3">
						<p class="jdbox" style="display: flex;" v-for="(item, index) in auditList">
							<span class="spzt" :class="{ytg:item.status==2,btg:item.status==3,dsh:item.status==1}"></span>
							<span class="xuLine" style="position: absolute;width: 2px;height: 20px;border: 1px dashed #ccc;"></span>
							<span>
								{{
									item.approveUser +
										'\xa0\xa0\xa0' +
										(item.status == 1 ? '待审核' : item.approveTime) +
										'\xa0\xa0\xa0' +
										(item.approveReason ? item.approveReason : '')
								}}
							</span>
						</p>
					</td>
				</tr>
			</table>

		<!-- 	<table v-if="qjDetail.state !== 4 && qjDetail.state !== 1" class="mailTable">
			
			</table> -->

			<div v-if="qjDetail.state >=4" class="shbj sptop">销假信息</div>

			<table v-if="qjDetail.state >=4" class="mailTable">
				<!-- 销假信息 -->
				<tr>
					<td class="column ">销假时间</td>
					<td class="nrkd">{{ xjDetail.reportBackTime }}</td>
					<td class="column ">销假时长</td>
					<td class="nrkd">{{ xjDetail.reportBackDuration }}小时</td>
				</tr>
				<tr>
					<td class="column">备注</td>
					<td class="nrkd lineHeight" colspan="3">{{ xjDetail.reportBackReason || '暂无' }}</td>
				</tr>
			</table>

			<table v-if="qjDetail.state == 5 || qjDetail.state == 6" class="mailTable">
				<!-- 销假审核信息 -->
				<tr>
					<td class="column ">审核人</td>
					<td class="nrkd">{{ qjDetail.approveUser }}</td>
					<td class="column ">审核时间</td>
					<td class="nrkd">{{ xjDetail.approveTime }}</td>
				</tr>
				<tr>
					<td class="column">审核理由</td>
					<td class="nrkd lineHeight" colspan="3">{{ xjDetail.approveReason || '暂无' }}</td>
				</tr>
				<tr>
					<td class="column ">实际请假</td>
					<td class="nrkd">{{ qjDetail.actualAbsence }}小时</td>
					<td class="column">实际调休</td>
					<td class="nrkd">{{ qjDetail.actualSabbatical }}小时</td>
				</tr>
			</table>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { getAbsenceList, getAbsenceDetail ,absenceApprove,approveReportBack,getUserOptions} from '@/api/hkd';
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus'
import useUserStore from '@/store/modules/user';
import headurl from '@/assets/images/head.png';
const { proxy } = getCurrentInstance();
const { absence_type } = proxy.useDict('absence_type');
const dateRange = ref([]);
const needNext = ref(1);
const sprData = ref({
	headImg: '',
	label: ''
});
const userId = ref(useUserStore().userId);
const nowAuditId = ref('');
const loading = ref(true);
const typeList = ref([]);
const userOptions = ref([]);
const spDialogVisible = ref(false);
const detailDialogVisible = ref(false);
const total = ref(0);
const auditList = ref([]);
const ruleFormRef = ref<FormInstance>()
const qjDetail = ref({});
const xjDetail = ref({});
const data = reactive({
	queryParams: {
		pageNum: 1,
		pageSize: 10,
		name: '',

		type: 'approve'
	},
	spForm: {
		approveReason: ''
	},
	spRules: {
		approveReason: [
			{
				required: true,
				message: '请填写审核意见',
				trigger: 'blur'
			}
		],
		nextUserId:[
			{
				required: true,
				message: '请选择审核人',
				trigger: 'change'
			}
		]
	}
});
const qjzt = ref({
	1: { color: '#FA6400', lable: '待审核',img:'dsh' },
	2: { color: '#1AC45F', lable: '通过',img:'ok' },
	3: { color: '#BE1A21', lable: '未通过',img:'btg' },
	4: { color: '#FA6400', lable: '销假待审核' },
	5: { color: '#999999', lable: '已销假' },
	6: { color: '#BE1A21', lable: '销假未通过' },
});
const reallyTime = computed(() => {
	if (qjDetail.value.absenceDuration) {
		if (qjDetail.value.absenceDuration > qjDetail.value.sabbaticalHour || qjDetail.value.absenceDuration == qjDetail.value.sabbaticalHour) {
			return Number(qjDetail.value.absenceDuration) - Number(qjDetail.value.sabbaticalHour);
		} else {
			return 0;
		}
	}
});
const { queryParams, spRules, spForm } = toRefs(data);
function getList() {
	loading.value = true;
	queryParams.value.startTime = dateRange.value[0]
	queryParams.value.endTime = dateRange.value[1]

	getAbsenceList(queryParams.value).then(response => {
		typeList.value = response.rows;
		total.value = response.total;
		loading.value = false;
	});
}

function appoversChange(data) {
	let arr = userOptions.value.filter(item => {
		if (item.value == data) {
			return item;
		}
	});
	sprData.value = arr[0];
}


function search(){
	 getList()
}

function reset(){
	dateRange.value = []
	queryParams.value.name = ''
	getList()

}
function approval(absenceId) {

	if(ruleFormRef.value){
		ruleFormRef.value.resetFields()
	}
	spDialogVisible.value = true;
	getAbsenceDetail({ absenceId: absenceId }).then(res => {
		
		if (res.code == 200) {
			absence_type.value.map(item=>{
				if(item.value == res.data.absence.type){
					res.data.absence.type = item.label
					qjDetail.value = res.data.absence
				}
				if(res.data.auditList){
					auditList.value = res.data.auditList
					res.data.auditList.map(item=>{
						if(item.approveId == userId.value){
							nowAuditId.value = item.id
						}
					})
				}
				if(res.data.reportBack){
					 xjDetail.value  = res.data.reportBack
				}
			})
		} else {
			ElMessage({
				type: 'warning',
				message: res.errmsg
			});
		}
	});
}

function detail(absenceId){


	detailDialogVisible.value = true;
	getAbsenceDetail({ absenceId: absenceId }).then(res => {
		if (res.code == 200) {
			absence_type.value.map(item=>{
				if(item.value == res.data.absence.type){
					res.data.absence.type = item.label
					qjDetail.value = res.data.absence
				}
			})
			
			if(res.data.reportBack){
				 xjDetail.value  = res.data.reportBack
			}
			if(res.data.auditList){
				auditList.value = res.data.auditList
			}
		} else {
			ElMessage({
				type: 'warning',
				message: res.errmsg
			});
		}
	});
}



function check(state){

		spForm.value.id = nowAuditId.value
	if(qjDetail.value.state == 1){
		spForm.value.status = state
		//请假的逻辑
		spForm.value.absenceId = qjDetail.value.absenceId
		if(needNext.value==1 && state===2){
			//不需要下级且是同意
			shQj()
		}else{
			ruleFormRef.value.validate((valid, fields)=>{
				if (valid) {
					shQj()
				}
			})
		}
	}else{
		//销假的逻辑
		spForm.value.id = xjDetail.value.id
		spForm.value.state = state
		if(state===2){
			shXj()
		}else{
			ruleFormRef.value.validate((valid, fields)=>{
				if (valid) {
					shXj()
				}
			})
		}
	}
}
function isSpBox(value){
	// if(needNext==)
	// spForm.value.nextUserId=''
}
function shQj(){
	absenceApprove(spForm.value).then(res=>{
		if(res.code===200){
			ElMessage({ message: '已审核！', type: 'success', duration: 1 * 1000 })
			spDialogVisible.value = false;
			getList();
		}else{
			ElMessage({
				message: res.msg,
				type: 'error'
			});
		}
	})
}
function shXj(){
	approveReportBack(spForm.value).then(res=>{
		if(res.code===200){
			ElMessage({ message: '已审核！', type: 'success', duration: 1 * 1000 })
			spDialogVisible.value = false;
			getList();
		}else{
			ElMessage({
				message: res.msg,
				type: 'error'
			});
		}
	})
}
function getUserSelect() {
	getUserOptions({
		userId: userId.value
	}).then(res => {
		userOptions.value = res.data;
		userOptions.value.forEach(ele => {
			if (!ele.headImg) {
				ele.headImg = headurl;
			} else {
				ele.headImg = import.meta.env.VITE_APP_BASE_API + ele.headImg;
			}
		});
	});
}
getUserSelect();
getList();
</script>

<style lang="scss" scoped>
.zBox {
	// padding: 1.25rem;
	height: 100%;
}
.top {
	background: #ffffff;
	padding: 20px 20px 2px 20px;
	border-radius: 10px;
}
.pst {
	position: absolute;
	right: 36px;
	padding: 6px;
}
.czan {
	display: flex;
	justify-content: center;
}
.ztbox {
	display: flex;
	align-items: center;
	justify-content: center;
	.dian {
		margin-right: 8px;
		width: 7px;
		height: 7px;
		border-radius: 50%;
	}
}
.bottom {
	background: #ffffff;
	border-radius: 0.625rem;
	height: 87%;
	margin-top: 25px;
	padding: 20px;
}
:deep(.qjTable) {
	height: calc(100vh - 320px);
	min-height: 400px;
	overflow: auto;
	.el-table__header-wrapper,
	.el-table__fixed-header-wrapper {
		th {
			word-break: break-word;
			background-color: #f7f7f7 !important;
			color: #515a6e;
			height: 58px !important;
			font-size: 13px;
			border: none !important;
		}
	}
	.el-table__body-wrapper {
		.el-button [class*='el-icon-'] + span {
			margin-left: 1px;
		}
		.el-table__row {
			td {
				border: none !important;
				height: 55px;
				cursor: pointer;
			}
		}
	}
}
:deep(.xHeight) {
	.el-form-item__label {
		height: 40px;
		line-height: 40px;
	}
}
:deep(.shbj) {
	background: url(../../assets/images/spbj.png) no-repeat;
	color: #be1a21;
	width: 140px;
	background-size: 100% 100%;
	padding: 5px 15px;
	font-size: 14px;
	margin-bottom: 10px;
	font-weight: 600;
}
.flxz {
	display: flex;
	flex-flow: column;
}
.sptop {
	margin-top: 20px;
}
:deep(.dw) {
	.el-form-item__content {
		display: flex;
		justify-content: end;
	}
}
:deep(.el-form) {
	.left {
		// height: 100px;
		border-right: 2px dashed #e5e1e1;
	}
}
:deep(.left) {
	width: 50%;
	// .el-form-item {
	// 	display: flex;
	// 	flex-flow: column;
	// }
}
:deep(.right) {
	margin-left: 50px;
	width: 42%;
	.el-form-item {
		display: flex;
		flex-flow: column;
	}
	.spr,
	.csr {
		margin-bottom: 10px;
		.el-form-item__label {
			width: 70px !important;
		}
	}
}
.dwidth {
	width: 100%;
}
.userOption {
	display: flex;
	align-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;

	img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	span {
		padding: 0 1rem;
	}
}
:deep(.dw) {
	.el-form-item__content {
		display: flex;
		justify-content: end;
	}
}
.spBox {
	display: flex;
	flex-flow: column;

	p {
		margin-top: 0;
	}
	img {
		width: 45px;
		height: 45px;
		border-radius: 50%;
	}
}
.sxm {
	margin-top: 20px;
}
.jdbox {
	position: relative;
}
.jdbox:last-child .xuLine {
	display: none;
}
.spzt {
	width: 20px;
	height: 20px;
	display: inline-block;
	background-size: contain;
	margin-right: 10px;
}
.xuLine {
	position: absolute;
	width: 1px;
	height: 17px;
	border-left: 2px dashed rgb(204, 204, 204);
	left: 9px;
	top: 20px;
}
.ytg {
	background: url(../../assets/images/mainImg/ok.png);
	background-size:100% 100% ;
}
.dsh {
	background: url(../../assets/images/mainImg/dsh.png);
	background-size:100% 100% ;
}
.btg {
	background: url(../../assets/images/mainImg/btg.png);
	background-size:100% 100% ;
}
</style>
